/*ahking作品2004-6*，如使用请保留*/
//屏幕坐标系概念
/*

0______________   x
 |
 |
 |
 |
 y
 
 */
/*需要在htm中加入元素：
1、<html xmlns:v="urn:schemas-microsoft-com:vml">
2、
<STYLE>
 v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
3、合适位置加入，大小可以自定义，但coordsize必须是对应10倍关系
（1）有箭头区域
<v:group ID="ken_group" style="WIDTH:600px;HEIGHT:400px" coordsize="6000,4000" >
		<v:line from="400,300" to="400,3600" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
		<v:stroke StartArrow="classic"/>
		</v:line>
		<v:line from="400,3600" to="5700,3600" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
		<v:stroke EndArrow="classic"/>
		</v:line>
		<v:rect style="WIDTH:6000;HEIGHT:4000" fillcolor="white" strokecolor="black">
		<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
		</v:rect>
      
</v:group>
（2）无箭头区域
<v:group ID="ken_group" style="WIDTH:600px;HEIGHT:400px" coordsize="6000,4000" ></v:group>
		
</v:group>
4、脚本引用
<SCRIPT LANGUAGE="JAVASCRIPT">        
if (document.all){
document.write('<script src="drawsquare.js"><\/script>')
}
</SCRIPT>
*/

/*5、画折线
//方法一，仅供参考
<iframe src="readData.asp" name="data" style="display:none"></iframe>
//readData.asp

//
<script>
<%
'数据库连接部分
'读数据部分
Do Until rs.EOF
%>
  parent.createPoint(<%=x%>,<%=y%>,<%=value%>);
<%
Loop
'数据库关闭部分
%>
</script>


//方法二、

<%
1、连接数据库，创建字符集
2、数组写数据
<SCRIPT LANGUAGE="JAVASCRIPT"> 
var a = new array;
var b = new array; 
for(int i=0;i<<%=rs.rows.count%>;i++)
{
a[i]=<%=rs.rows[i]["a"]%>;
b[i]=<%=rs.rows[i]["b"]%>;
}
%>
3、画折线
  drawpls(0,a,100,0,b,200,'red','1pt'%>
</SCRIPT>

*/

//显示坐标值，未完成
function displocation(obj)
{
obj.style.cursor="crosshair";
var grouptop=obj.getBoundingClientRect().top+document.body.scrollTop;
var groupleft=obj.getBoundingClientRect().left+document.body.scrollLeft;
//var px_width=obj.style.width;
//var validcoordx = px_width.substr(0,px_width.indexOf("p"))*10;

//var axis=
window.status = "X=" + window.event.x + " Y=" + window.event.y+"top="+grouptop;

}


//画折线
function drawpls(x0,x_array,x1,y0,y_array,y1,scolor,sheight)
{
//x0:横坐标最小值；x1:横坐标最大值；
 var px_width=document.getElementById("ken_group").style.width;
 var validcoordx = px_width.substr(0,px_width.indexOf("p"))*10-1000;//1000包括300：箭头距边线距离，400：留给坐标值的距离；300：坐标线距箭头的距离
   
 var px_height=document.getElementById("ken_group").style.height;
 var validcoordy = px_height.substr(0,px_height.indexOf("p"))*10-800;//800包括300：箭头距边线距离，400：留给坐标值的距离;100：坐标线距箭头的距离
 var vx=validcoordx/(x1-x0);
 var vy=validcoordy/(y1-y0);
 var xn=0;
 var yn=0;
 var kenpoints="";
 
 var arraylen=x_array.length;
 
 for(var i=0;i<arraylen;i++){
 xn=400+x_array[i]*vx;
 yn=validcoordy+400-y_array[i]*vy;
 kenpoints=kenpoints+xn.toString()+","+yn.toString()+" ";
 }

 var newpl= document.createElement("<v:PolyLine filled='false' Points="+kenpoints+" strokecolor="+scolor+" strokeweight="+sheight+" style='z-index:20' />");
 ken_group.insertBefore(newpl);  

}


/*************************************************画无箭头坐标区开始******************************************************************************************/

function drawsquare(ken_group,lnx,lny,nbx,nex,nby,ney,string_x,string_y,new_x,scolor,sheight)
{

//lnx:横线个数；lny:竖线个数；nbx:横线起点值；nex:横线终点值；nby：竖线起点值；ney:竖线终点值
 
 
 var px_width=eval("document.all."+ken_group).style.width;
 //计算自定义坐标系下的画板宽度
 var coordx = px_width.substr(0,px_width.indexOf("p"))*10;
 //定义需要留给写纵坐标值的偏移距离
 offset_x=360;//36个像素的距离
 //定义有效宽度
 var validcoordx = coordx-offset_x;
 
 var px_height=eval("document.all."+ken_group).style.height;
 //计算自定义坐标系下的画板高度
 var coordy = px_height.substr(0,px_height.indexOf("p"))*10
 //定义需要留给写横坐标值的偏移距离
 offset_y=50;
 //定义有效高度
 var validcoordy = coordy-offset_y;
 
 
 //----------------------------------------------------------------画折线
 //从nbx到nex有nex-nbx+1个点，有nex-nbx个单位区间
 var vx=validcoordx/(nex-nbx);
 var vy=validcoordy/(ney-nby);
 var xn=0;
 var yn=0;
 var kenpoints="";
 
 var array_x=string_x.split(",");
 var array_y=string_y.split(",");
 var arraylen=array_x.length;
 
 if(arraylen>0)
 {
   for(var i=0;i<arraylen;i++){
   xn=parseInt(array_x[i]*vx,10)+offset_x
   yn=parseInt((ney-array_y[i])*vy,10)
   kenpoints=kenpoints+xn.toString()+","+yn.toString()+" ";
   }
  
 var newpl1= "<v:PolyLine  filled='false' Points='"+kenpoints+"' strokecolor='red' strokeweight='1px' style='z-index:20' />";
 var newpl2= "<v:PolyLine  filled='false' Points='"+kenpoints+"' strokecolor='red' strokeweight='1px' style='z-index:20' />";

// var newpl= document.createElement("<v:PolyLine filled='false' Points="+kenpoints+" strokecolor="+scolor+" strokeweight="+sheight+" style='z-index:20' />");
 
// ds_qc.appendChild(newpl);
 document.getElementById("ds_qc1").insertAdjacentHTML("beforeEnd",newpl1);  
 document.getElementById("ds_qc").insertAdjacentHTML("beforeEnd",newpl2);     
 //ds_qc1.insertBefore(newpl);  
 //ds_qc2.insertBefore(newpl);  
 }
 
 
 /*
 //----------------------------------------------------------------画竖线
 //计算竖线之间的距离
 var intervallenx=parseInt(validcoordx/(lny-1),10); 
 
 //计算刻度值
 var nix=parseInt((nex-nbx)/(lny-1),10);

 //将-日期转换为/日期
 var d = new Date(new_x.replace(/(-)/g,"\/"));

 //写入横坐标数值，并画竖线
 
 var count=0; 
 var textPoint=nbx;
 
 for(var i=0;i<lny;i++){
    //从上往下画
    var px=offset_x+i*intervallenx;//定义竖线横坐标值
    var strTo=px+" "+validcoordy;//定义竖线终点坐标，vml下，坐标可以用x,y或x y的形式表示
    //开始划竖线，开始坐标：（px 0），终点坐标（strTo）
    var newLine = document.createElement("<v:line from='"+px+" 0' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
    eval(ken_group).insertBefore(newLine);
   
    //定义写坐标值的位置，每段刻度写一个
    
   
    if(i==10){
        var dd = new Date(d.getTime()-24*3600*1000*20);                                                                                       //200为写坐标值的区域的宽度
        var newtextrect2= document.createElement("<v:rect  style='position:absolute;left:"+(offset_x+intervallenx*10-180)+";top:"+(validcoordy+offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:8' fillcolor='white'></v:rect>");//定义坐标点数值区域    
        eval(ken_group).insertBefore(newtextrect2);  
		var newstroke2=document.createElement("<v:stroke  color='white'/>");
		
		newtextrect2.insertBefore(newstroke2);
		var newText2 = document.createElement("<div align='center' style='font-size:10pt;word-break:break-all;'></div>");
		newtextrect2.insertBefore(newText2);
		newText2.innerText=dd.getUTCMonth()+1+"/"+dd.getDate();//写入坐标数值
		
	}
	  if(i==20){
        var dd = new Date(d.getTime()-24*3600*1000*10);                                                                                       //200为写坐标值的区域的宽度
        var newtextrect2= document.createElement("<v:rect  style='position:absolute;left:"+(offset_x+intervallenx*20-180)+";top:"+(validcoordy+offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:8' fillcolor='white'></v:rect>");//定义坐标点数值区域    
        eval(ken_group).insertBefore(newtextrect2);  
		var newstroke2=document.createElement("<v:stroke  color='white'/>");
		
		newtextrect2.insertBefore(newstroke2);
		var newText2 = document.createElement("<div align='center' style='font-size:10pt;word-break:break-all;'></div>");
		newtextrect2.insertBefore(newText2);
		newText2.innerText=dd.getUTCMonth()+1+"/"+dd.getDate();//写入坐标数值
		
	}
	if(i==30){
        var dd = new Date(d.getTime());                                                                                       //200为写坐标值的区域的宽度
        var newtextrect2= document.createElement("<v:rect  style='position:absolute;left:"+(offset_x+intervallenx*30-200)+";top:"+(validcoordy+offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:8' fillcolor='white'></v:rect>");//定义坐标点数值区域    
        eval(ken_group).insertBefore(newtextrect2);  
		var newstroke2=document.createElement("<v:stroke  color='white'/>");
		
		newtextrect2.insertBefore(newstroke2);
		var newText2 = document.createElement("<div align='center' style='font-size:10pt;word-break:break-all;'></div>");
		newtextrect2.insertBefore(newText2);
		newText2.innerText=dd.getUTCMonth()+1+"/"+dd.getDate();//写入坐标数值
		
	}
    if(count%10==0){
	    var newStroke = document.createElement("<v:stroke color='#c0c0c0' LineStyle='ThinThin'>");//定义线的颜色
	    newLine.insertBefore(newStroke);	
	    
	 }
	else
	{
	    var newStroke = document.createElement("<v:stroke dashstyle='dot' LineStyle='ThinThin' color='black'/>");
	    newLine.insertBefore(newStroke);
	}
	count++;
	textPoint=textPoint+nix;
 }
 
  //----------------------------------------------------------------画横线
 //计算横线之间的距离
 var intervalleny=parseInt(validcoordy/(lnx-1),10); 
 
 //计算刻度值
 var niy=parseInt((ney-nby)/(lnx-1),10);
  //写入纵坐标数值，并画横线
 
 var count1=0; 
 var textPoint1=ney;
 
 for(var j=0;j<lnx;j++){
    //从左往右画
    var strBe1=offset_x+" "+j*intervalleny;//定义横线起点坐标
    var strTo1=coordx+" "+j*intervalleny;//定义横线终点坐标，vml下，坐标可以用x,y或x y的形式表示
    //开始划横线，开始坐标：（strBe1），终点坐标（strTo1）
    var newLine1 = document.createElement("<v:line from='"+strBe1+"' to='"+strTo1+"' style='position:absolute;z-index:8'></v:line>");
    eval(ken_group).insertBefore(newLine1);
    //定义横线样式
    if(count1%2==0)
    {
	    var newStroke1 = document.createElement("<v:stroke color='#c0c0c0' LineStyle='ThinThin'>");
	    newLine1.insertBefore(newStroke1);	
        
	}
	else
	{
	    //本特例不画横虚线
	    var newStroke1 = document.createElement("<v:stroke color='#c0c0c0' LineStyle='ThinThin'>");
	    //var newStroke1 = document.createElement("<v:stroke dashstyle='dot' color='black' LineStyle='ThinThin'/>");
	    newLine1.insertBefore(newStroke1);
	    
	}
	   //写入坐标值
	    var newtextrect3= document.createElement("<v:rect  style='position:absolute;left:0;top:"+(j*intervalleny-20)+";WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'></v:rect>");//定义坐标点数值区域    
        eval(ken_group).insertBefore(newtextrect3);  
        var newstroke3=document.createElement("<v:stroke  color='white'/>");
        newtextrect3.insertBefore(newstroke3);
        var newText3 = document.createElement("<div align='center' style='font-size:9pt;word-break:break-all;'></div>");
        newtextrect3.insertBefore(newText3);
        newText3.innerText=textPoint1;//写入坐标数值
        textPoint1=textPoint1-niy;
	count1++;
	
 }
 */
 
}

/*******************************************画无箭头坐标区结束***********************************************************************************************/



//画横向坐标线并写坐标点值
function drawLinesX(lnx,nbx,nex,strx)
{
 //lnx: 坐标线的个数；nbx：坐标起始值；nex：坐标终止值；strx：y轴名称
 var px_width=document.getElementById("ken_group").style.width;
 var validcoordx = px_width.substr(0,px_width.indexOf("p"))*10-1000;//1000包括300：箭头距边线距离，400：留给坐标值的距离；300：坐标线距箭头的距离
   
 var px_height=document.getElementById("ken_group").style.height;
 var validcoordy = px_height.substr(0,px_height.indexOf("p"))*10-800;//800包括300：箭头距边线距离，400：留给坐标值的距离;100：坐标线距箭头的距离
 //计算坐标线之间的距离
 var intervalleny=parseInt(validcoordy/(lnx+1),10);
 //计算刻度值
 var nix=parseInt((nex-nbx)/lnx,10);

 
 //写y轴名称
 var newynamerect= document.createElement("<v:rect  style='position:absolute;left:30;top:10;WIDTH:770;HEIGHT:290;z-index:8' fillcolor='white'></v:rect>");   
 ken_group.insertBefore(newynamerect);  
 var newynamestroke=document.createElement("<v:stroke  color='white'/>");
 newynamerect.insertBefore(newynamestroke);
 var newynameText = document.createElement("<div align='center'  style='vertical-align:middle;font-size:10pt;word-break:break-all;line-height:100% '></div>");
 //var newynameText = document.createElement("<v:textbox  inset='3pt,0pt,3pt,0pt' style='font-size:10pt;text-anchor: middle;v-text-anchor:bottom-right-baseline'></v:textbox>");
 newynamerect.insertBefore(newynameText);
 newynameText.innerText=strx;
 
 
 //写入坐标数值
 
 //document.write(validcoordx);
 var count=0; 
 var textPoint=nbx;
 
 //var group1=document.getElementById("group1");
 for(var i=1;i<=lnx;i++){
    //从下往上画，+400以定位到X轴
    var py=validcoordy+400-i*intervalleny;//定义横线纵坐标值
    var strTo=validcoordx+400+" "+py;//定义横线终点坐标
    //vml下，坐标可以用x,y或x y的形式表示
    var newLine = document.createElement("<v:line from='400 "+py+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
    ken_group.insertBefore(newLine);
    if(count%2!=0){
	    var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");//定义线的颜色
	    newLine.insertBefore(newStroke);	
        var newtextrect= document.createElement("<v:rect  style='position:absolute;left:20;top:"+(py-100)+";WIDTH:360;HEIGHT:160;z-index:8' fillcolor='white'></v:rect>");//定义坐标点数值区域    
        ken_group.insertBefore(newtextrect);  
        var newstroke=document.createElement("<v:stroke  color='white'/>");
        newtextrect.insertBefore( newstroke);
        var newText = document.createElement("<div align='center' style='font-size:10pt;word-break:break-all;'></div>");
        newtextrect.insertBefore(newText);
        newText.innerText=textPoint+nix*2;//写入坐标数值
        textPoint=textPoint+nix*2;
	}
	else
	{
	    var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
	    newLine.insertBefore(newStroke);
	}
	count++;
 }
}

//画纵坐标线并写坐标点值
function drawLinesY(lny,nby,ney,stry)
{
//lny: 坐标线的个数；nby：坐标起始值；ney：坐标终止值；stry：x轴名称
 var px_width=document.getElementById("ken_group").style.width;
 var validcoordx = px_width.substr(0,px_width.indexOf("p"))*10-1000;//1000包括300：箭头距边线距离，400：留给坐标值的距离；300：坐标线距箭头的距离
 
 var px_height=document.getElementById("ken_group").style.height;
 var validcoordy = px_height.substr(0,px_height.indexOf("p"))*10-800;//800包括300：箭头距边线距离，400：留给坐标值的距离;100：坐标线距箭头的距离
 //计算坐标线之间的距离
 var intervallenx=parseInt(validcoordx/(lny+1),10); 
 
 //计算刻度值
 var niy=parseInt((ney-nby)/lny,10);

 
 //写x轴名称
 var newxnamerect= document.createElement("<v:rect  style='position:absolute;left:"+(validcoordx+410)+";top:"+(validcoordy+460)+";WIDTH:580;HEIGHT:260;z-index:8' fillcolor='white'></v:rect>");   
 ken_group.insertBefore(newxnamerect);  
 var newxnamestroke=document.createElement("<v:stroke  color='white'/>");
 newxnamerect.insertBefore(newxnamestroke);
 var newxnameText = document.createElement("<div align='center' style='font-size:10pt;word-break:break-all;line-height:100% '></div>");
 //var newynameText = document.createElement("<v:textbox  inset='3pt,0pt,3pt,0pt' style='font-size:10pt;text-anchor: middle;v-text-anchor:bottom-right-baseline'></v:textbox>");
 newxnamerect.insertBefore(newxnameText);
 newxnameText.innerText=stry;
 
 
 //写入坐标数值
  //document.write(validcoordx);
 var count=0; 
 var textPoint=nby;
 
 //var group1=document.getElementById("group1");
 for(var i=1;i<=lny;i++){
    //从左往右画，+400以定位到y轴
    var px=400+i*intervallenx;//定义纵线横坐标值
    var strTo=px+" "+(validcoordy+400);//定义纵线终点坐标
    //vml下，坐标可以用x,y或x y的形式表示
    var newLine = document.createElement("<v:line from='"+px+" 400' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
    ken_group.insertBefore(newLine);
    if(count%2!=0){
	    var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");//定义线的颜色
	    newLine.insertBefore(newStroke);	
        var newtextrect2= document.createElement("<v:rect  style='position:absolute;left:"+(px-180)+";top:"+(validcoordy+420)+";WIDTH:360;HEIGHT:200;z-index:8' fillcolor='white'></v:rect>");//定义坐标点数值区域    
        ken_group.insertBefore(newtextrect2);  
        var newstroke2=document.createElement("<v:stroke  color='white'/>");
        newtextrect2.insertBefore(newstroke2);
        var newText2 = document.createElement("<div align='center' style='font-size:10pt;word-break:break-all;'></div>");
        newtextrect2.insertBefore(newText2);
        newText2.innerText=textPoint+niy*2;//写入坐标数值
        textPoint=textPoint+niy*2;
	}
	else
	{
	    var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
	    newLine.insertBefore(newStroke);
	}
	count++;
 }
}

//仅写纵向坐标点值，未修改
function drawPointsY(n)
{
 var textPoint=1;
 for(var i=1;i<=n;i++){
    var p_x=170+i*300;
    var newLine = document.createElement("<v:line from='"+p_x+" 2700' to='"+p_x+" 2750' style='position:absolute;z-index:8'></v:line>");
    group1.insertBefore(newLine);
    var newStroke = document.createElement("<v:stroke color='black'>");
    newLine.insertBefore(newStroke);	
    var newShape= document.createElement("<v:shape style='position:absolute;left:"+(p_x-50)+";top:2750;WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")    
    group1.insertBefore(newShape);        
    var newText = document.createElement("<v:textbox id='ty"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
    newShape.insertBefore(newText);
	newText.innerHTML=textPoint;
    textPoint++;
 }
}

//仅画坐标线，未修改
function drawplotLines()
{
 var count=0;//画纵向座标线
 for(var i=0;i<=60;i++){
    var px=200+73*i;
    var newLine = document.createElement("<v:line from='"+px+" 200' to='"+px+" 2800' style='position:absolute;z-index:7'></v:line>");
    group1.insertBefore(newLine);
    if(count%5!=0){
	    var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
	    newLine.insertBefore(newStroke);
	}
	else
	{
	    var newStroke = document.createElement("<v:stroke color='#babbae'>");
	    newLine.insertBefore(newStroke);
	}
	count++;
 }
 count=0; //画横向座标线
 for(var i=0;i<=35;i++){
    var py=2800-73*i;
    var newLine = document.createElement("<v:line from='200 "+py+"' to='4650 "+py+"' style='position:absolute;z-index:7'></v:line>");
    group1.insertBefore(newLine);
	if(count%5!=0){
	    var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
	    newLine.insertBefore(newStroke);
	}
	else
	{
	    var newStroke = document.createElement("<v:stroke color='#babbae' />");
	    newLine.insertBefore(newStroke);	
	}	
	count++;
 }
}


function drawBar(v,t)//画柱状图，未修改
{
  var h=v*245-50;
  var px=2750-v*245;
  var py=170+t*300;
  var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9' coordsize='21600,21600' fillcolor='blue'></v:rect>")    
  group1.insertBefore(newShape);
}
function drawBars()
{
 drawBar(6,1);
 drawBar(5,2);
 drawBar(6,3);
 drawBar(8,4);
 drawBar(3,5);
 drawBar(1,6);
 drawBar(9,7); 
 drawBar(2,8); 
 drawBar(6,9); 
 drawBar(5,10);
 drawBar(7,11);
 drawBar(3,12);
}





function changeit()//未修改
{
 banana.value=100-(parseInt(apple.value)+parseInt(pear.value));
 showPie();
}
var r=2000;
function createPie(sa,ea,color,n)
{
  var fs=Math.PI*2*(sa/360);
  var fe=Math.PI*2*(ea/360);
  var sx=parseInt(r*Math.sin(fs));
  var sy=parseInt(-r*Math.cos(fs));
  var ex=parseInt(r*Math.sin(fe));
  var ey=parseInt(-r*Math.cos(fe));
  var newPie=document.createElement("<v:shape title='"+n+"' style='position:absolute;z-index:8;width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='black' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
  //var newPie=document.createElement("<v:shape style='position:absolute;z-index:8;left:"+px+";top:"+py+";width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='"+color+"' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
  pie.insertBefore(newPie);
}
function showPie()
{
  pie.innerHTML=""; 
  createPie(0,parseInt(banana.value)*3.6,"blue","香蕉");
  createPie(parseInt(banana.value)*3.6,parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,"red","苹果");
  createPie(parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,360,"green","梨");
}